<template>
    <div>
      <Personinfo style="height: 50px;"></Personinfo>
      <Logox></Logox>
      <menux></menux>
      <el-main>
        <el-row :gutter="20">
            <el-col :span="5" style="width: 280px;">
              <div class="grid-content bg-purple" >
                <el-card class="box-card" body-style="padding-top:10px;height:269px;">
                  <div slot="header" class="clearfix">
                    <span >个人信息</span>
                  </div>
                  <div class="personInfo" >
                    您好！admin
                  </div>
                  <div class="personInfo" style="color: coral">
                      您还未创建简历!
                  </div>
                  <div class="personInfo">
                    <el-link type="primary">创建简历</el-link>
                    <el-link type="warning" @click="gotoPersonInfoPage">进入个人中心</el-link>
                  </div>
                  <div class="personInfo">面试通知：0</div>
                  <div class="personInfo">已申请的职位：0</div>
                  <div class="personInfo">已收藏的职位： 1</div>
                  <div class="personInfo">简历被谁浏览： 0</div>
                  <el-button style="height: 30px;
                                    padding: 3px 10px;
                                    width: 200px;" @click="doLogoOut">退出</el-button>
                </el-card>
              </div>
            </el-col>
            <el-col :span="10" style="width: 665px;height:355px;margin: 0px 0px ;padding: 0px 0px;">

                <div class="grid-content bg-purple" >
                  <div class="block" >
                    <el-carousel style="height: 355px" >
                      <el-carousel-item v-for="item in listImages" :key="item" style="height: 355px">
                        <el-image style="height: 355px;width: 100%"
                                  :src="item"
                            fit="fill" ></el-image>
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </div>
            </el-col>
            <el-col :span="5" style="width: 285px">
              <el-card class="box-card" style="margin-left: 10px">
                <el-tabs v-model="activeNameNews" style="margin: -20px -20px;height: 355px;" type="card" @tab-click="handleClick">
                  <el-tab-pane label="新闻咨询" name="first1"  style="margin-top: -6px;margin-left: -10px;">
                    <ul style="margin-left: -15px;margin-top: -10px;">
                      <li style="list-style:none" v-for="(item,index) in news">
                        <el-link class="el-icon-caret-right" style="margin-top: 10px;">{{item}}</el-link><br/>
                      </li>
                    </ul>
                  </el-tab-pane>

                </el-tabs>
              </el-card>
            </el-col>
       </el-row>
        <el-row >
          <div v-for="adv in listAdvs" style="padding: 5px 0px;">
            <el-image style="width: 100%;padding: 0px 0px;"
                      :src="adv"
                      fit="fill"></el-image>
          </div>
        </el-row>

        <!--横向广告栏-->
        <el-row :gutter="20" style="width: 1225px;" v-for="index in parseInt(listAdvs2.length/2)">
          <el-col :span="10" style="width: 50%;">
              <el-image style="width: 100%;height: 100%"
                        :src="listAdvs2[(index-1)*2]"
                        fit="fill"></el-image>
          </el-col>
          <el-col :span="10" style="width: 50%;">
              <el-image style="width: 100%;height: 100%"
                        :src="listAdvs2[(index-1)*2+1]"
                        fit="fill"></el-image>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="5" style="width: 282px;margin: 0px 0px;padding: 0px 0px;">
            <el-card class="box-card" style="margin-left: 10px">
              <el-tabs v-model="activeNameNotice" style="margin: -20px -20px;height: 655px;" type="card" @tab-click="handleClick">
                <el-tab-pane label="通知公告" name="first2"  style="margin-top: -6px;margin-left: -10px;">
                  <ul style="margin-left: -15px;margin-top: -10px;">
                    <li style="list-style:none" v-for="(item,index) in news2">
                      <el-link class="el-icon-caret-right" style="margin-top: 10px;">{{item}}</el-link><br/>
                    </li>
                  </ul>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-col>
          <el-col :span="10" style="width: 665px;height:655px;margin: 0px 0px ;">
            <el-card class="box-card" style="width: 665px;height:655px;margin: 0px 0px ;">
              <el-tabs v-model="activeNameJG" style="margin-top:-20px;margin-left:-20px;height: 655px;" type="card" @tab-click="handleClick">
                <el-tab-pane label="机关招聘" name="first3"  style="margin-top: -2px;margin-left: -2px;">
                  <el-card class="box-card" style="float:left;padding:5px 0px;margin:2px 5px;width: 310px" v-for="item in 10">
                    <div style="margin-top: -10px;">服务员/厨师/墩子 <span style="color:red">1000-3000</span></div>
                    <div style="margin: 10px 0px;font-size: 12px;"><span>两年以上</span><span>本科</span><span>工程师</span></div>
                    <div style="margin-bottom: -10px;">小龙坎火锅店有限责任公司</div>
                  </el-card>
                </el-tab-pane>
                <el-tab-pane label="企业招聘" name="first4"  style="margin-top: -2px;margin-left: -2px;">
                  <el-card class="box-card" style="float:left;padding:5px 0px;margin:2px 5px;width: 310px" v-for="item in 10">
                    <div style="margin-top: -10px;">服务员/厨师/墩子</div>
                    <div style="color:red;margin: 8px 0px;">1000-3000</div>
                    <div style="margin-bottom: -10px;">小龙坎火锅店有限责任公司</div>
                  </el-card>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-col>
          <el-col :span="5" style="width: 282px">
            <el-card class="box-card" style="margin-left: 10px">
              <el-tabs v-model="activeNamePQ" style="margin: -20px -20px;height: 655px;" type="card" @tab-click="handleClick">
                <el-tab-pane label="派遣咨询" name="first5"  style="margin-top: -6px;margin-left: -10px;">
                  <ul style="margin-left: -15px;margin-top: -10px;">
                    <li style="list-style:none" v-for="(item,index) in news2">
                      <el-link class="el-icon-caret-right" style="margin-top: 10px;">{{item}}</el-link><br/>
                    </li>
                  </ul>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-col>
        </el-row>

        <h3 style="margin: 5px 0px;">人才招聘</h3>
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col style="width: 10px">
              <el-link class="el-icon-caret-left" style="padding-top: 240px" :underline="false"></el-link>
            </el-col>
            <el-col style="width: 96%;margin-left: 5px;">
              <el-card class="box-card" style="float:left;margin:2px 5px;width: 360px" v-for="item in 12">
                <el-row :gutter="20">
                  <el-col :span="5">
                    <el-image style="width: 80px;height:80px;padding: 0px 0px;"
                              :src="header"
                              fit="fill"></el-image>
                  </el-col>
                  <el-col :span="15" style="width: 265px;padding-left: 30px;">
                    <div style="margin-top: -10px;">张三</div>
                    <div style="margin: 10px 0px;"><span>男</span><span>31</span><span>本科</span><span>5年以上</span></div>
                    <div style="margin-bottom: -10px;">计算机/互联网</div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col  style="width: 0px">
               <el-link class="el-icon-caret-right"  style="padding-top: 240px"  :underline="false"></el-link>
            </el-col>
          </el-row>
        </el-card>
        <h3 style="margin: 5px 0px;">企业推荐</h3>
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col style="width: 10px">
              <el-link class="el-icon-caret-left" style="padding-top: 150px" :underline="false"></el-link>
            </el-col>
            <el-col style="width: 96%;margin-left: 5px;">
              <el-image
                  style="width: 272px; height: 100px;margin: 2px 2px;border: 1px solid #999;"
                  :src="logo"
                  fit="fill" v-for="logo in comLogos"></el-image>
            </el-col>
            <el-col  style="width: 0px">
              <el-link class="el-icon-caret-right"  style="padding-top: 150px"  :underline="false"></el-link>
            </el-col>
          </el-row>
        </el-card>
      </el-main>
      <el-footer>
        <el-divider></el-divider>
        <el-row :gutter="20">
          <el-col :span="8" :offset="8">
            <footerx></footerx>
          </el-col>
        </el-row>
      </el-footer>
    </div>
</template>

<script>
import menux from '../menux'
import Logox from '../Logox'
import footerx from '../footerx'
import Personinfo from "../Personinfo";
import Job from "../common/Job";
import {isPersonal} from "../../assets/util";

export default {
  components: {menux,Logox,footerx,Personinfo,Job},
  name: "Home",
  data(){
    return {
      activeName: 'first',
      activeNameNews:'first1',
      activeNameNotice:'first2',
      activeNameJG:'first3',
      activeNamePQ:'first5',
      header:'./static/default_photo.png',
      news: [
          "加强内训学习 提升业务素能",
          "改善变革窘境 解决创新难题..",
          "高效输送人才 有序开展面试",
          "高效输送人才 有序开展面试",
          "高效输送人才 有序开展面试",
          "高效输送人才 有序开展面试",
          "高效输送人才 有序开展面试",
          "高效输送人才 有序开展面试",
          "高效输送人才 有序开展面试",
          "高效输送人才 有序开展面试"],
      news2: [
        "加强内训学习 提升业务素能",
        "改善变革窘境 解决创新难题..",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试",
        "高效输送人才 有序开展面试"],
      listImages:['./static/carousel/1.png','./static/carousel/2.png','./static/carousel/3.jpg'],
      listAdvs:[
          './static/advertisement/6.jpg',
          './static/advertisement/4.jpg',
          './static/advertisement/4.jpg',
          './static/advertisement/6.jpg',
          './static/advertisement/7.png'],
      listAdvs2:[
          './static/advertisement/2.jpg',
          './static/advertisement/5.jpg',
          './static/advertisement/1.jpg',
          './static/advertisement/5.jpg',
          './static/advertisement/2.jpg',
          './static/advertisement/3.jpg'
      ],
      comLogos:['./static/com/1.png',
        './static/com/2.png',
        './static/com/3.png',
        './static/com/4.png',
        './static/com/5.png',
        './static/com/6.png',
        './static/com/7.png',
        './static/com/8.png',
        './static/com/9.png',
        './static/com/10.png',
        './static/com/11.png',
        './static/com/12.png'
      ]
    }
  },
  methods:{
    handleClick(){

    },
    open(){

    },
    gotoPersonInfoPage(){
     if(isPersonal()){//进入个人
       this.$router.push("PersonInfoPage");
     }else{//进入企业信息
       this.$router.push("EnterprisePage");
     }
     // this.$router.push("PersonInfoPage");

    },
    doLogoOut(){
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("name");
      this.$router.push("login")
    }
  }
}
</script>

<style scoped>
.el-main{
  margin:0 auto;
  background: azure;
  width: 1250px;
}
.personInfo{
  margin: 10px 5px;
  padding-top: 2px;
}
.el-card{
  margin: 0px 0px ;
  padding: 0px 0px;
}
.Personinfo{
  background-color: #dcdfe6;
}
</style>